<template>
  <div>
    <!-- 新增按钮 -->
    <el-button type="primary" @click="handleAdd">新增日志</el-button>

    <!-- 日志列表 -->
    <el-table
      :data="list"
      border
      style="width: 100%"
      v-loading="loading"
    >
      <!-- 原有列定义 -->
      <el-table-column
        prop="logId"
        label="日志ID"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="userId"
        label="用户ID"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="shift"
        label="班次"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="notes"
        label="日志内容"
        width="300"
      ></el-table-column>
      <!-- 新增操作列 -->
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑/新增对话框 -->
    <el-dialog 
      :title="isEdit ? '编辑日志' : '新增日志'" 
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="form.userId"></el-input>
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="班次" prop="shift">
          <el-select v-model="form.shift" placeholder="请选择班次">
            <el-option label="早班" value="早班"></el-option>
            <el-option label="中班" value="中班"></el-option>
            <el-option label="晚班" value="晚班"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日志内容" prop="notes">
          <el-input
            type="textarea"
            :rows="3"
            v-model="form.notes"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  zbrzSelectAll,
  zbrzDelete,
  zbrzAdd,
  zbrzUpdate 
} from "@/api/jhrz/zbrz";

export default {
  data() {
    return {
      list: [], // 存储日志列表数据
      dialogFormVisible: false, // 编辑对话框的显示状态
      form: {
        logId: "", // 日志 ID
        userId: "", // 用户 ID
        date: "", // 日期
        shift: "", // 班次
        notes: "", // 日志内容
      },
      loading: false,
      isEdit: false,
      rules: {
        userId: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
        date: [{ required: true, message: '请选择日期', trigger: 'change' }],
        shift: [{ required: true, message: '请选择班次', trigger: 'change' }],
        notes: [{ required: true, message: '请输入日志内容', trigger: 'blur' }]
      }
    };
  },
  created() {
    this.fetchData(); // 页面加载时获取数据
  },
  methods: {
    // 查询日志列表
    async fetchData() {
      this.loading = true;
      try {
        const response = await zbrzSelectAll();
        this.list = response.data.filter(log => log.isDeleted === 0); // 过滤掉已逻辑删除的记录
        console.log("更新日志列表", this.list);
      } catch (error) {
        console.error("获取数据失败", error);
        this.$message.error('获取数据失败');
      } finally {
        this.loading = false;
      }
    },

    // 新增操作
    handleAdd() {
      this.isEdit = false;
      this.form = { ...this.$options.data().form }; // 重置表单
      this.dialogFormVisible = true;
    },

    // 编辑操作
    handleEdit(row) {
      this.isEdit = true;
      this.form = { ...row };
      this.dialogFormVisible = true;
    },

    // 删除操作
    handleDelete(row) {
      this.$confirm('确认删除该日志？', '提示', {
        type: 'warning'
      }).then(() => {
        zbrzDelete(row.logId)
          .then(() => {
            this.$message.success('删除成功');
            this.fetchData();
          })
          .catch(error => {
            console.error("删除失败", error);
            this.$message.error('删除失败');
          });
      });
    },

    // 表单提交
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const api = this.isEdit ? zbrzUpdate : zbrzAdd;
          api(this.form)
            .then(() => {
              this.$message.success(this.isEdit ? '修改成功' : '添加成功');
              this.dialogFormVisible = false;
              this.fetchData();
            })
            .catch(error => {
              console.error("提交失败", error);
              this.$message.error(this.isEdit ? '修改失败' : '添加失败');
            });
        }
      });
    }
  }
};
</script>